import React, { useState, useEffect, useRef } from 'react';
import { Tabs, Row, Col, Space, Tooltip } from 'antd';
import {
    ArrowLeftOutlined,
    UploadOutlined,
    DownloadOutlined,
    SelectOutlined,
    DeleteOutlined,
    EditOutlined,
} from '@ant-design/icons';
import { CmdbContent, CmdbHeader, TempImportModal, Authorized } from '@/components';
import cmdbres from '@/data/cmdbres';
import request, { exportFile } from '@/utils/request';
import permission from '@/config/permission';
import ModelField from './modelField';
import ModelRelation from './modelRelation';
import ModelUnique from './modelUnique';
import ModelLogs from './modelLogs';
import DeleteModel from '../modelManagement/deleteModel';
import '../index.less';

const { TabPane } = Tabs;

const ModelDetail = ({ history, modelInfo }) => {
    const [showImportModal, setShowImportModal] = useState(false);
    const [showDeleteModel, setShowDeleteModel] = useState(false);
    const [info, setInfo] = useState();

    const [activeKey, setActiveKey] = useState('field');
    const handleTabOnChange = (tab) => {
        setActiveKey(tab);
    };

    const goResourceList = (value) => {
        console.log('this is goResourceList');
        history.push({
            pathname: `/resource/catalog/list/${info?.cmModuleId}`,
            state: { moduleName: modelInfo.moduleName },
        });
    };

    const childRef = useRef();
    const updateChildState = () => {
        // changeVal是子组件暴露给父组件的方法
        childRef.current.changeVal();
    };

    useEffect(() => {
        setInfo(modelInfo);
        handleTabOnChange('field');
    }, [modelInfo]);

    const exportFn = async () => {
        const exportFileName = info?.moduleName + '.json' || '模型.json';
        console.log(exportFileName);
        const res = await exportFile(
            {
                ...cmdbres.exportModel(info?.cmModuleId),
                params: {},
            },
            exportFileName
        );
    };

    return (
        <>
            <div className="info-box">
                <Row justify="space-between" className="basic-info">
                    <Col span={18} className="left-box">
                        <div className="org-box">
                            <span className="model-info">唯一标识：</span>
                            <span className="model-text">{info?.moduleCode}</span>
                        </div>
                        <div className="org-box">
                            <span className="model-info">名称：</span>
                            <span className="model-text">{info?.moduleName}</span>
                        </div>
                        <div className="org-box ">
                            <span className="model-info">实例数量：</span>
                            <span className="model-text link-info" onClick={goResourceList}>
                                <span>{info?.count} </span>
                                <SelectOutlined rotate="90" />
                            </span>
                        </div>
                        <div className="org-box">
                            <span className="model-info">模型id：</span>
                            <span className="model-text">{info?.cmModuleId}</span>
                        </div>
                    </Col>
                    <Col span={6} className="right-box">
                        <Space>
                            {/* {activeKey==='field' ? <span className="link-info" onClick={() => {setShowImportModal(true)}}><span className="iconfont icon-daoru" > 导入</span></span> : null}  */}
                            <Authorized authority={permission.model_export} noMatch={null}>
                                <Tooltip placement="top" title="导出">
                                    <span className="link-info" onClick={exportFn}>
                                        <span className="iconfont icon-daochu"> 导出</span>
                                    </span>
                                </Tooltip>
                            </Authorized>
                            <Authorized authority={permission.model_delete} noMatch={null}>
                                <Tooltip placement="top" title="删除模型和其下所有实例，此动作不可逆，请谨慎操作">
                                    <span
                                        className="link-info"
                                        onClick={() => {
                                            setShowDeleteModel(true);
                                        }}
                                    >
                                        <span className="iconfont icon-delete"> 删除</span>
                                    </span>
                                </Tooltip>
                            </Authorized>
                        </Space>
                    </Col>
                </Row>
            </div>
            <Tabs className="field-box" activeKey={activeKey} size="large" onChange={handleTabOnChange}>
                <TabPane tab="模型字段" key="field">
                    {activeKey === 'field' && (
                        <ModelField history={history} moduleId={info?.cmModuleId} cRef={childRef} />
                    )}
                </TabPane>
                <TabPane tab="模型关联" key="relation">
                    {activeKey === 'relation' && (
                        <ModelRelation history={history} moduleId={info?.cmModuleId} moduleInfo={info} />
                    )}
                </TabPane>
                <TabPane tab="唯一校验" key="unique">
                    {activeKey === 'unique' && (
                        <ModelUnique moduleId={info?.cmModuleId} moduleCode={info?.moduleCode} />
                    )}
                </TabPane>
                <TabPane tab="变更历史" key="log">
                    {activeKey === 'log' && <ModelLogs moduleId={info?.cmModuleId} modelInfo={info} />}
                </TabPane>
            </Tabs>
            <TempImportModal
                title="导入模型字段"
                visible={showImportModal}
                setVisible={setShowImportModal}
                downloadApi="导入模板.xlsx" // 下载模板
                downloadURL={'/module/export/export-property-excel'} // 下载地址
                onImportFinish={() => {
                    updateChildState();
                }}
                importApi={cmdbres.importModelProperty} // 导入地址
            />
            <DeleteModel
                onDeleteFinish={() => {
                    window.location.reload();
                }}
                visible={showDeleteModel}
                setVisible={setShowDeleteModel}
                info={info}
            />
        </>
    );
};

export default ModelDetail;
